<template>
	<div class="doc_pc_components_Input">
		<div>
			插槽:
			<Input
				v-model="val"
				placeholder="请输入"
				style="width:150px;"
			>
				<template #prefix>
					<Icon
						name="bi-person-circle"
						style="flex-shrink:0"
					/>
				</template>
				<template #suffix>
					<Icon
						name="bi-search"
						style="flex-shrink:0"
					/>
				</template>
			</Input>
		</div>
		<div>内容: {{val}}</div>
		<div>
			<Input
				v-model="val"
				placeholder="请输入"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				autofocus
				style="width:150px;"
			/>
			<Input
				v-model="val"
				clearable
				placeholder="请输入"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				clearable
				autofocus
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				placeholder="请输入"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="noBorder"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="round"
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="noBorder"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="round"
				readonly
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="noBorder"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				shape="round"
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				clearable
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				clearable
				type="password"
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				disabled
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="noBorder"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="round"
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="noBorder"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				readonly
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="round"
				readonly
				style="width:150px;"
			/>
		</div>
		<div>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="noBorder"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="noBorder"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				prefix-icon="bi-person-circle"
				suffix-icon="bi-search"
				shape="round"
				disabled
				style="width:150px;"
			/>
			<Input
				v-model="val"
				type="password"
				shape="round"
				disabled
				style="width:150px;"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Input,Icon} from 'powerful-ui/pc-default';

const val=shallowRef('测试内容');
</script>

<style lang="scss">
.doc_pc_components_Input{
	>div{
		margin:20px;
		.pf-Input{
			margin-right:10px;
		}
	}
}
</style>